<!--
 * @Author: your name
 * @Date: 2021-10-06 21:35:01
 * @LastEditTime: 2021-10-07 17:23:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \common-vue\src\components\mForm\mInput.vue
-->
<template>
  <div class="myInput-box">
    <!-- 只对关键属性type和value进行props的绑定,
         其他非关键属性,比如placeholder,通过v-bind="$attrs"的方式来获取  -->
    <input :type="type" :value="value" @input="onInput" v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  // 在父组件中去掉$attrs上面的属性值,父组件上没必要带这些数据
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  methods: {
    onInput(e) {
      // input值发生变化,把变化的值分发一个input事件出去,形成双向数据绑定
      this.$emit('input', e.target.value)
      // input值发生变化,通过父亲分发一个validate事件,原因是因为在MyFormItem中是通过插槽的方式,来引入MyInput
      // 还有一个好处,顶层分发,后代都能监听
      // 目的是为了让MyFormItem来监听validate事件,在MyFormItem中完成表单项的校验
      this.$parent.$emit('validate')
    }
  }
}
</script>

<style scoped lang="less">
.myInput-box {
  input{
    border: 1px solid black;
  }
}
</style>
